<template>
  <div id="materialDispatch" ref="appRef3">
    <el-container style="height: 94%">
      <el-header class="materialDispatchHeader">
        <commonHeader></commonHeader>
      </el-header>

      <el-container style="height: 100%">
        <el-aside width="250px">
          <el-menu
            :value="editableTabsValue"
            class="el-menu-vertical-materialDispatchMain"
            @open="handleOpen"
            @close="handleClose"
            :default-active="editableTabsValue"
            :unique-opened="true"
            :default-openeds="openeds"
          >
            <el-submenu
              v-for="item in menuArr"
              :key="item.id"
              :index="item.index"
            >
              <template slot="title">
                <div @click="MenuClick(item)">
                  <i class="el-icon-menu"></i>
                  <span>
                    {{ item.name }}
                  </span>
                </div>
              </template>
              <el-menu-item-group v-if="item.children">
                <el-menu-item
                  v-for="childrenItem in item.children"
                  :key="childrenItem.id"
                  :index="childrenItem.index"
                  @click="MenuClick(childrenItem)"
                >
                  <span>
                    {{ childrenItem.name }}
                  </span></el-menu-item
                >
              </el-menu-item-group>
            </el-submenu>
          </el-menu></el-aside
        >
        <el-main class="materialDispatchMain">
          <el-tabs
            v-model="editableTabsName"
            type="card"
            editable
            @edit="handleTabsEdit"
            style="width: 100%; height: 100%"
          >
            <el-tab-pane
              :key="item.id"
              v-for="item in editableTabs"
              :label="item.title"
              :name="item.name"
              style="width: 100%; height: 100%"
              :lazy="false"
            >
              <router-view></router-view>
            </el-tab-pane>
          </el-tabs> </el-main
      ></el-container>
    </el-container>
  </div>
</template>

<script>
import commonHeader from "./commonHeader.vue";
import drawMixin3 from "../../utils/drawMixin3";
export default {
  name: "materialDispatch",
  components: {
    commonHeader,
  },
  mixins: [drawMixin3],
  data() {
    return {
      title: "",
      openeds: ["2"],
      menuArr: [
        {
          id: "1",
          icon: "",
          path: "materKansan",
          name: "物资看板",
          index: "1",
        },
        {
          icon: "",
          path: "",
          name: "材料管理",
          id: "2",
          index: "2",
          children: [
            {
              index: "2-1",
              id: "3",
              icon: "",
              path: "supplierInform",
              name: "供应商信息",
              children: [],
            },
            {
              index: "2-2",
              id: "4",
              icon: "",
              path: "materInform",
              name: "材料信息",
              children: [],
            },
            {
              index: "2-3",
              id: "5",
              icon: "",
              path: "warehouseInform",
              name: "仓库信息",
              children: [],
            },
            {
              index: "2-4",
              id: "6",
              icon: "",
              path: "stationInform",
              name: "站场管理",
              children: [],
            },
            {
              index: "2-5",
              id: "7",
              icon: "",
              path: "accountInter",
              name: "核算区间",
              children: [],
            },
            {
              index: "2-6",
              id: "8",
              icon: "",
              path: "proPortManage",
              name: "配比管理",
              children: [],
            },
            {
              index: "2-7",
              id: "9",
              icon: "",
              path: "materRequirePlan",
              name: "物资需求计划",
              children: [],
            },
            {
              index: "2-8",
              id: "10",
              icon: "",
              path: "warehouseReceipt",
              name: "入库单",
              children: [],
            },
            {
              index: "2-9",
              id: "11",
              icon: "",
              path: "warehouseBill",
              name: "出库单",
              children: [],
            },
            {
              index: "2-10",
              id: "12",
              icon: "",
              path: "stockAOrder",
              name: "盘点单",
              children: [],
            },
            {
              index: "2-11",
              id: "13",
              icon: "",
              path: "materInventory",
              name: "物资库存",
              children: [],
            },
            {
              index: "2-12",
              id: "14",
              icon: "",
              path: "listMaterStorage",
              name: "入库明细表",
              children: [],
            },
            {
              index: "2-13",
              id: "15",
              icon: "",
              path: "materOutStockList",
              name: "出库明细表",
              children: [],
            },
            {
              index: "2-14",
              id: "16",
              icon: "",
              path: "inventorySubsidiaryLedger",
              name: "盘点明细账",
              children: [],
            },
            {
              index: "2-15",
              id: "17",
              icon: "",
              path: "landScaleDataQuery",
              name: "地磅数据查询",
              children: [],
            },
            {
              index: "2-16",
              id: "18",
              icon: "",
              path: "materSectionSuperAnalysis",
              name: "节超分析",
              children: [],
            },
            {
              index: "2-17",
              id: "19",
              icon: "",
              path: "problemRectifyList",
              name: "问题整改分析",
              children: [],
            },
            {
              index: "2-18",
              id: "20",
              icon: "",
              path: "inspect",
              name: "报检送检列表",
              children: [],
            },
          ],
        },
        {
          index: "3",
          id: "21",
          icon: "",
          path: "",
          name: "基础信息管理",
          children: [
            {
              index: "3-1",
              id: "22",
              icon: "",
              path: "departManage",
              name: "部门管理",
              children: [],
            },
            {
              index: "3-2",
              id: "23",
              icon: "",
              path: "projectManage",
              name: "项目管理",
              children: [],
            },
          ],
        },
      ],
      editableTabsValue: "3",
      editableTabs: [{ id: "1", name: "物资看板", title: "物资看板" }],
      editableTabsName: "物资看板",
    };
  },

  mounted() {
    this.$router.push("/materKansan");
    console.log(document.documentElement.clientWidth);
    document.title = "物资管理";
  },

  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    MenuClick(item) {
      let isTrue;

      this.editableTabs.forEach((i) => {
        if (item.id == i.id) {
          console.log(item.id);
          this.editableTabsName = item.name;
          this.editableTabsValue = item.id;
          isTrue = true;
          if (item.path) {
            this.$router.push(item.path);
          }
        }
      });
      if (isTrue) {
        return;
      }
      if (item.path) {
        this.$router.push(item.path);
        this.editableTabs.push({
          title: item.name,
          id: item.id,
          name: item.name,
        });
        this.editableTabsName = item.name;
        console.log(this.editableTabs);
      }
    },
    handleTabsEdit(targetName, action) {
      console.log(this.editableTabsName);
      if (action === "remove") {
        let tabs = this.editableTabs;
        console.log(this.editableTabsValue);
        let activeName = this.editableTabsName;
        if (activeName === targetName) {
          tabs.forEach((tab, index) => {
            if (tab.name === targetName) {
              let nextTab = tabs[index + 1] || tabs[index - 1];
              if (nextTab) {
                activeName = nextTab.name;
              }
            }
          });
        }

        this.editableTabs = tabs.filter((tab) => tab.name !== targetName);

        this.editableTabsName = activeName;
        console.log(this.editableTabsName);
        console.log(this.editableTabs);
      }
    },
  },
};
</script>
<style lang="less" scoped>
#materialDispatch {
  background-color: white;
  width: 2140px;
  height: 1080px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transform-origin: left top;
  overflow: hidden;

  .materialDispatchHeader {
    width: 100%;
    margin: 0 auto;

    position: relative;
    background-color: #333;
  }
  .materialDispatchMain {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    padding: 0;
    .el-menu-vertical-materialDispatchMain {
      width: 200px;
    }
  }
}
</style>
<style lang="less">
#materialDispatch {
  .el-tabs__content {
    max-height: 94%;
    height: 94%;
  }
}
</style>
